<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书分类</title>
	<base href="${pageContext.request.contextPath }/">
    <link rel="stylesheet" type="text/css" href="css/common/commonutils.css">
    <link rel="stylesheet" type="text/css" href="css/index/head.css">
    <link rel="stylesheet" type="text/css" href="css/index/foot.css">
    <link rel="stylesheet" type="text/css" href="css/book/book.css">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <!-- 三级分类的内容 -->
    
    <!-- 头部内容 -->
    <div id="head">
        <!-- 最上方的导航栏 -->
        <div id="navigation">
            <ul>
                <c:if test="${empty sessionScope.user }">
                	<li style="margin-right: 30px;">您好，请先登录~</li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">              
                	<li style="margin-right: 30px;">欢迎您，${sessionScope.user.name }</li>
                </c:if>
                <li>当前所在地：地球村</li>
            </ul>
            
            <ul>
                <li>
                    <i id="shoping_cart_logo"></i>
                    <a href="shoppingcart">购物车</a>
                    <b class="shoping_cart_num">${sessionScope.shoppingNum}</b>
                </li>
                <li>|</li>
                <li><a href="orders">我的订单</a></li>
                <li>|</li>
                <li id="my_home"><a href="">我的钱包</a><i>您的余额:${sessionScope.user.balance }</i></li>
                <li>|</li>
                <c:if test="${empty sessionScope.user }">
                	<li><a href="login">登录</a></li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">
                	<li><a href="exit">注销</a></li>
                </c:if>
                <li>|</li>
                <li><a href="register">注册</a></li>
            </ul>
        </div>
    </div>
    <!-- logo图片和搜索框 -->
   <div id="logo_line">
            <a href=""><img id="logo" src="images/uugai.com_1604756139381.png" /></a>
        <div id="search">
            <form>
                <input type="text" />
                <input type="submit" value="" />
            </form>
            <div id="searchbottom">
               	热搜:
                <a href="#">安徒生童话</a>
                <a href="#">三体</a>
                <a href="#">python</a>
            </div>
        </div>
        <!-- 设置购物车和订单 -->
        <div id="cart_order">
            <div id="lib_cart">
                <a href="shoppingcart">
                    <i class="cart_logo"></i>
                   	 购物车
                   	 <b class="shoping_cart_num">${sessionScope.shoppingNum}</b>
                </a>
            </div>
            <div id="lib_order">
                <a href="orders">
                    <i id="cart_logo"></i>
                    	我的订单
                </a>
            </div>
        </div>
    </div>
    <!-- 菜单栏 -->
    <div id="menu">
        <ul>
            <li>全部分类</li>
            <!-- 拿到前面八个分类名 -->
            <c:forEach items="${requestScope.categoryByCLevel }" var="category" begin="0" end="7">           		
            		<li><a href="category/${category.id }">${category.name }</a></li>
            </c:forEach>
        </ul>
    </div>
    <!-- 制作分类和轮播图部分 -->
    <!-- 来个logo -->
    <div id="book_logo"><img src=""></div>

    <!-- 内容区 -->
    <div id="content_category">
        <!-- 第一块内容：分类栏导航 -->
        <div id="category">
            <a href="" index="${requestScope.nowCategoryId }">全部</a>&nbsp;&gt;&nbsp;
            <a href="category/${requestScope.categoryTree.id}">${requestScope.categoryTree.name }</a>&nbsp;&gt;&nbsp;
            <select onchange="window.location=this.value;">
	            <c:forEach items="${requestScope.categoryTree.children }" var="category">
	             <option value="category/${category.id }">${category.name }</option>
	            </c:forEach>
            </select>&nbsp;&gt;&nbsp;
            <c:if test="${not empty requestScope.categoryTree.children[0].children }">
            <select onchange="window.location=this.value;">
	            <c:forEach items="${requestScope.categoryTree.children[0].children }" var="category">
	            	 <option value="category/${category.id }">${category.name }</option>
	            </c:forEach>
            </select>
            </c:if>
            <span>共有多少<em>${requestScope.bookNum }</em>件商品</span>
        </div>
        <!-- 真正可选择的分类的内容 -->
        <div id="selcet_category">
            <!-- 每一小项 -->
            <c:if test="${not empty requestScope.childrenCategory }">
             <div class="item_category">
                <p class="item_title">分类</p>
                <div class="item_content">
                	<c:forEach items="${requestScope.childrenCategory }" var="item">
                    <a href="category/${item.id }">${item.name }</a>
                		
                	</c:forEach>
                </div>
            </div>
            </c:if>
            
           	<c:if test="${not empty requestScope.bookPress }">
           		<div class="item_category">
                <p class="item_title">出版社</p>
                <div class="item_content" index="press">
                	<c:forEach items="${requestScope.bookPress }" var="press">
                		<a href="javascript:void(0)">${press.name}</a>
                	</c:forEach>
                </div>
            	</div>
           	</c:if>
            
            <c:if test="${not empty requestScope.bookAuthor }">
	            <div class="item_category">
	                <p class="item_title">作者</p>
	                <div class="item_content" index="author">
	                    <c:forEach items="${requestScope.bookAuthor }" var="press">
	                		<a href="javascript:void(0)">${press}</a>
	                	</c:forEach>
	                </div>
	            </div>
            </c:if>
            
            <div class="item_category">
                <p class="item_title">价格</p>
                <div class="item_content" index="price">
                    <a href="javascript:void(0)">0-19</a>
                    <a href="javascript:void(0)">19-29</a>
                    <a href="javascript:void(0)">29-39</a>
                    <a href="javascript:void(0)">39以上</a>
                </div>
            </div>

        </div>
        <!-- 根据分类内容分页查出所有的图书 -->
        <div id="page_book">
            <!-- 最上方的分类排序 -->
            <div>
                <ul id="category_sort">
                    <li><a active="1" style="color:red;background-color:rgb(220,220,220);" title="点击后按照综合排序" href="normal">综合排序</a></li>
                    <li><a title="点击后按照销量从高到低排序" href="sales">销量<i></i></a></li>
                    <li><a title="点击后按照好评从高到低排序" href="praise">好评<i></i></a></li>
                    <li><a title="点击后按照出版时间从近到远排序" href="createTime">出版时间<i></i></a></li>
                    <li><a id="sort_price" title="点击后按照价格由低到高排序" href="price">价格<i></i></a></li>
                    <li id="input_price">
                        <input type="text"/>-
                        <input type="text"/>
                        <div>
                            <button onclick="submitPrice()">确认</button>
                            <button onclick="clearPrice()">清除</button>
                        </div>
                    </li>
                    <li>
                        <button>&lt;</button>
                        <span>1</span>/<span><fmt:formatNumber value="${requestScope.bookNum/10 + (requestScope.bookNum/10 % 1 == 0 ? 0 : 0.5)}" type="number" pattern="#" /></span> 
                        <button>&gt;</button>
                    </li>
                </ul>
            </div>
            <!-- 真正放图书的内容 -->
            <div id="category_books">
            	<c:forEach items="${requestScope.bookByCategory }" var="book">
            		<div class="category_book">
	                    <img class="pic" src="${book.image }">
	                    <div>
	                        <a class="name" href="book/${book.id }">${book.title } </a>
	                        <p class="price">
	                            <span>￥:<em class="now_price"><fmt:formatNumber value="${book.price * book.discount /10}" pattern="0.00"></fmt:formatNumber></em></span>
	                            <span>定价:<em>￥:${book.price }</em>（<em>${book.discount }</em>折）</span>                           
	                        </p>
	                        <p class="author">
	                            <span>${fn:replace(book.author,';',' , ')  }</span>
	                            <span><fmt:formatDate value="${book.createTime }" pattern="yyyy-MM-dd"/></span>
	                            <span>${book.pressName }</span>
	                        </p>
	                        <p class="comments"><em>${book.commentNum }</em>条评论</p>
	                        <p class="extra_sale"><span>自营</span><span>卷</span></p>
	                        <p class="introduction">${book.introduction }</p>
	                        <p class="shopping">
	                            <button class="shoppingcar">加入购物车</button>
	                            <button class="toshop">购买</button>
	                        </p>
	                    </div>
                	</div>
            	</c:forEach>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div id="footer">Copyright 2020 由小行星个人制作的图书网站</div>

    <script type="text/javascript" src="js/book/book_category.js"></script>
    <script type="text/javascript" src="js/book/book_sort.js"></script>
</body>
</html>